<template>
  <div class="app-container">
    <div class="search-container">
      <!-- 头部查询表单 -->
      <el-form ref="QueryFormRef" :inline="true" :model="params">
        <el-form-item>
          <el-button type="primary" @click="resetQuery">
            <el-icon>
              <refresh/>
            </el-icon>
            查询全部
          </el-button>
          <el-button type="success" @click="openDialog()">
            <el-icon>
              <plus/>
            </el-icon>
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="orderDetailsTableLoading" :data="orderDetailsDataList"
                border highlight-current-row
                @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="订单明细id" prop="id" width="200"/>
        <el-table-column align="center" label="订单id" min-width="50" prop="orderId"/>
        <el-table-column align="center" label="材料id" min-width="50" prop="materialId"/>
        <el-table-column align="center" label="模型id" min-width="50" prop="fileId"/>
        <el-table-column align="center" label="数量" prop="quantity" width="150"/>
      </el-table>

      <pagination
          v-if="total > 0"
          v-model:limit="params.limit"
          v-model:page="params.page"
          v-model:total="total"
          @pagination="handleQuery"
      />
    </el-card>

    <!-- 表单弹窗 -->
    <el-dialog
        v-model="dialog.visible" :title="dialog.title"
        width="65%" @close="closeDialog"
    >
      <el-form
          ref="OrderDetailsFormRef" :model="orderDetailsFormData" :rules="rules"
          label-position="left" label-width="120px" @keyup.enter.native="handleSubmit"
      >
        <el-form-item label="数量" prop="quantity">
          <el-input-number v-model.trim="orderDetailsFormData.quantity" placeholder="请输入数量"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref} from "vue";
import {Plus, Refresh} from "@element-plus/icons-vue";
import Pagination from "@/components/pagination.vue";
/**
 * OrderDetails ——> 实体大驼峰
 * orderDetails ——> 实体小驼峰
 * 订单明细 ——> 实体中文名
 */
import {
  createOrderDetails,
  deleteOrderDetailsBatchByIds,
  getOrderDetailsById,
  getOrderDetailsPageList,
  updateOrderDetails,
} from "@/apis/order-details";

const QueryFormRef = ref();
const OrderDetailsFormRef = ref();

const orderDetailsTableLoading = ref(false);
const selectionIds = ref([]);

const total = ref(0);

const params = reactive({
  page: 1,
  size: 10
});

const orderDetailsDataList = ref([]);

const dialog = reactive({
  title: "",
  visible: false,
});
const orderDetailsFormData = reactive({
  id: undefined,
  orderId: "",
  materialId: "",
  fileId: "",
  quantity: ""
});
const rules = {
  quantity: [{required: true, message: "请输入数量", trigger: "blur"}],
}

/** 查询 */
const handleQuery = () => {
  orderDetailsTableLoading.value = true;
  getOrderDetailsPageList(params)
      .then(({data}) => {
        orderDetailsDataList.value = data.list;
        total.value = data.totalCount;
      })
      .finally(() => {
        orderDetailsTableLoading.value = false;
      });
}

/** 重置查询 */
const resetQuery = () => {
  QueryFormRef.value.resetFields();
  handleQuery();
}

/** 行checkbox 选中事件 */
const handleSelectionChange = selection => {
  selectionIds.value = selection.map((item) => item.id);
}

/** 打开订单明细表单弹窗 */
const openDialog = id => {
  dialog.visible = true;
  if (id) {
    dialog.title = "修改订单明细";
    getOrderDetailsById(id).then(({data}) => {
      Object.assign(orderDetailsFormData, data);
    });
  } else {
    dialog.title = "新增订单明细";
  }
}

/** 订单明细保存提交 */
const handleSubmit = () => {
  OrderDetailsFormRef.value.validate((valid) => {
    if (valid) {
      orderDetailsTableLoading.value = true;
      if (orderDetailsFormData.id) {
        updateOrderDetails(orderDetailsFormData)
            .then(() => {
              ElMessage.success("修改成功");
              closeDialog();
              resetQuery();
            })
            .finally(() => (orderDetailsTableLoading.value = false));
      } else {
        createOrderDetails(orderDetailsFormData)
            .then(() => {
              ElMessage.success("新增成功");
              closeDialog();
              resetQuery();
            })
            .finally(() => (orderDetailsTableLoading.value = false));
      }
    }
  });
}

/** 重置表单 */
const resetForm = () => {
  OrderDetailsFormRef.value.resetFields();
  orderDetailsFormData.id = undefined;
}

/** 关闭表单弹窗 */
const closeDialog = () => {
  dialog.visible = false;
  resetForm();
}


/** 删除订单明细 */
const handleDelete = row => {
  ElMessageBox.confirm(`确认删除《${row.name}》?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    orderDetailsTableLoading.value = true;
    deleteOrderDetailsById(row.id)
        .then(() => {
          ElMessage.success("删除成功");
          resetQuery();
        })
        .finally(() => (orderDetailsTableLoading.value = false));
  });
}
/** 批量删除 */
const handleBatchDelete = () => {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    orderDetailsTableLoading.value = true;
    deleteOrderDetailsBatchByIds(selectionIds.value)
        .then(() => {
          ElMessage.success("删除成功");
          resetQuery();
        })
        .finally(() => (orderDetailsTableLoading.value = false));
  });
}
onMounted(() => {
  handleQuery();
});
onActivated(() => {
  handleQuery();
})
</script>
<style scoped>
:deep(.pagination) {
  display: flex;
  justify-content: center;
}
</style>

